<template>
  <div>
    <PageWrapper>
      <div
        style="text-align: left; position: absolute; top: 17px; display: inline-block; z-index: 100"
      >
        <span v-if="record.code"> 【 {{ record.code }} 】 </span>
        <span> <DictLabel :dictType="'order_status'" :dictValue="record.orderStatus" /></span>
        <a-button
          type="primary"
          @click="handleForm()"
          class="ml-2"
          v-auth="'shop:order:soMain:edit'"
          v-if="record.orderStatus === '4' && orderStatus != 'detail'"
        >
          <Icon icon="clarity:note-edit-line" /> {{ '订单编辑' }}
        </a-button>
        <a-popconfirm
          title="是否确认审核订单？"
          ok-text="是"
          cancel-text="否"
          placement="bottom"
          @confirm="handleSp(record)"
          v-if="record.orderStatus === '4' && orderStatus != 'detail'"
        >
          <a-button type="success" class="ml-2" v-auth="'shop:order:soMain:sp'">
            <Icon icon="clarity:note-edit-line" /> {{ '订单审核' }}
          </a-button>
        </a-popconfirm>
        <a-popconfirm
          title="是否确认作废订单？"
          ok-text="是"
          cancel-text="否"
          placement="bottom"
          @confirm="handleCancle({ code: record.code })"
          v-if="record.orderStatus === '4' && orderStatus != 'detail'"
        >
          <a-button type="error" class="ml-2" v-auth="'shop:order:soMain:edit'">
            <Icon icon="clarity:note-edit-line" /> {{ '订单作废' }}
          </a-button>
        </a-popconfirm>
      </div>
      <Tabs v-model:activeKey="activeKey" tabPosition="top">
        <Tabs.TabPane
          v-for="(item, index) in formTabs"
          :key="index"
          :forceRender="true"
          :tab="item.tabName"
        >
          <SingleForm
            v-if="flag"
            :schemas="item.colList"
            :formConfig="formConfig"
            :data="record"
            ref="singleFormArr"
          />
        </Tabs.TabPane>
      </Tabs>
      <!-- <BasicForm @register="registerForm" @submit="handleForm" /> -->
      <InputFormTabsEdit @register="registerDrawer2" @success="handleSuccess" />
      <!-- <div style="border-top: 1px solid #eee"></div> -->
      <!-- <a-divider /> -->
      <PageWrapper v-if="flag" :sidebarWidth="0">
        <Sale :soCode="soCode" :data="record" :orderStatus="orderStatus" @success="handleSuccess" />
      </PageWrapper>
    </PageWrapper>
    <BasicModal v-bind="$attrs" @register="registerModal" title="作废原因" @ok="handleCancelReason">
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsShopOrderMainSaleForm',
  });
</script>
<script lang="ts" setup>
  import Sale from '../sale/list.vue';
  import { PageWrapper } from '/@/components/Page';
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { formSet } from '/@/api/test/testData';
  // import { formSchemas } from '/@/utils/custom';
  import { useDrawer } from '/@/components/Drawer';
  //import InputFormTabs from './formTabs.vue';
  import InputFormTabsEdit from './formTabs-edit.vue';
  import { stockListData } from '/@/api/shop/order/soRds';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { FormProps } from '/@/components/Form';
  import { Tabs } from 'ant-design-vue';
  import SingleForm from './singleForm.vue';
  import { SoMain, soMainForm, soMainSp, soMainCancel } from '/@/api/shop/order/soMain';
  import { DictLabel } from '/@/components/Dict';
  import { BasicModal, useModal } from '/@/components/Modal';

  const tableColumns: BasicColumn[] = [
    {
      title: '存货名称',
      dataIndex: 'cinvname',
      key: 'a.cinvname',
      sorter: true,
      width: 200,
      align: 'left',
    },
    {
      title: '仓库',
      dataIndex: 'cwhname',
      key: 'a.cwhcode',
      sorter: true,
      width: 80,
      align: 'center',
    },
    {
      title: '可用量',
      dataIndex: 'icanuseqty',
      key: 'a.icanuseqty',
      sorter: true,
      width: 80,
      align: 'right',
    },
    {
      title: '分仓占用',
      dataIndex: 'dpredate',
      key: 'a.dpredate',
      sorter: false,
      width: 80,
      align: 'right',
    },
    {
      title: '存货编码',
      dataIndex: 'cinvcode',
      key: 'a.cinvcode',
      sorter: true,
      width: 130,
      align: 'left',
    },
  ];

  let soCode = ref<any>('');
  let orderStatus = ref<any>('');

  const record = ref<any>({});
  let formTabs = ref<any>([]);
  let formConfig = ref<any>({});
  let flag = ref(false);

  const activeKey = ref<number>(0);

  const searchForm: FormProps = {
    baseColProps: { lg: 8, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        label: '存货编码',
        field: 'cinvcode',
        component: 'Input',
      },
      {
        label: '存货名称',
        field: 'cinvname',
        component: 'Input',
      },
    ],
  };

  watch(
    () => router.currentRoute.value.query.id,
    () => {
      reloadData(router.currentRoute.value.query.id);
    },
    { immediate: true },
  );

  const [registerTable, { reload }] = useTable({
    api: stockListData,
    beforeFetch: (params) => {
      params.id = router.currentRoute.value.query.id;
      return params;
    },
    columns: tableColumns, //配置表格内容数组对象
    // actionColumn: actionColumn, //配置表格右边操作按钮
    formConfig: searchForm, //配置表单内容
    showTableSetting: true, //表格右上角3个默认按钮
    useSearchForm: true, //表单是否展示
    canResize: true, //表格是否flex布局
    showIndexColumn: false,
  });

  const [registerDrawer2, { openDrawer: openDrawer2 }] = useDrawer();
  const [registerForm, { resetFields, validate }] = useForm({
    labelWidth: 120,
    schemas: [
      {
        field: 'cancelReason',
        component: 'InputTextArea',
        componentProps: {
          placeholder: '请输入作废原因',
          maxlength: 200,
          rows: 7,
        },
        colProps: { lg: 24, md: 24 },
      },
    ],
    baseColProps: { lg: 24, md: 24 },
  });
  const [registerModal, { openModal, closeModal }] = useModal();

  const { t } = useI18n('shop.order.mainSale');
  const { showMessage } = useMessage();
  const schemas = ref<FormSchema[]>();
  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: t('现存量'),
  };

  // const [registerForm, { setProps, setFieldsValue }] = useForm({
  //   labelWidth: 140,
  //   baseColProps: { lg: 4, md: 24 },
  //   compact: true,
  //   showActionButtonGroup: true,
  //   showResetButton: false,
  //   submitButtonOptions: {
  //     text: '编辑',
  //   },
  // });
  function handleForm() {
    openDrawer2(true, { code: router.currentRoute.value.query.id });
  }

  function handleSuccess() {
    reloadData(router.currentRoute.value.query.id);
  }

  // 进入页面获取数据
  async function reloadData(code) {
    flag.value = false;
    soCode.value = code;
    activeKey.value = 0;
    const res11 = await formSet({ viewCode: 'shop_order_form001' });
    let formTabs1 = res11.layVoucherView.formTabs;
    // formTabs.value = res11.layVoucherView.formTabs;
    formTabs1.forEach((item) => {
      item.colList?.forEach((i) => {
        i.formDynamicDisable = '1';
        if (i.formField == 'remarks') {
          i.formColProps = '6';
        } else {
          i.formColProps = '6';
        }
        if (i.formField == 'zhanwei') {
          i.formShow = '1';
          i.formLabel = '';
          i.formComponent = 'None';
        }
        if (item.tabName == '物流信息') {
          i.formColProps = '8';
        }
        if (item.tabName == '协同信息') {
          i.formColProps = '12';
        }
      });
    });
    formTabs.value = formTabs1;
    formConfig.value = res11.layVoucherView.formConfig;
    formConfig.value.formColNum = '6';
    const res = await soMainForm({ code });
    record.value = (res.soMain || {}) as SoMain;
    record.value.__t = new Date().getTime();
    flag.value = true;
    // orderStatus.value = record.value.orderStatus;
    orderStatus.value = router.currentRoute.value.query.orderStatus
      ? router.currentRoute.value.query.orderStatus
      : record.value.orderStatus;
  }

  // 订单审核
  async function handleSp(record) {
    const res = await soMainSp({ code: record.code });
    showMessage(res.message);
    handleSuccess();
  }

  // 订单作废
  async function handleCancle() {
    await openModal(true, {});
    resetFields();
  }

  async function handleCancelReason() {
    let data = await validate();
    let params = {
      code: record.value.code,
      cancelReason: data.cancelReason,
    };
    const res = await soMainCancel(params); // 订单作废
    showMessage(res.message);
    handleSuccess();
    closeModal();
  }
</script>
<style scoped>
  /deep/ .ant-tabs-nav-wrap {
    flex-direction: row-reverse;
  }
  /deep/ .ant-tabs-content-holder {
    max-height: 200px;
    min-height: 200px;
    /* overflow: scroll; */
  }

  .jeesite-editable-cell__action {
    display: none;
  }

  .edit-cell-align-center {
    width: 100% !important;
  }
</style>
